<template>
  <main>
    <van-nav-bar
      title="我的收藏"
      right-text="编辑"
      left-arrow
      @click-left="onClickLeft"
       @click-right="onClickRight"
    />
    <van-tabs v-model:active="active">
      <van-tab title="已完成">
        <div>
          <button class="btn">管理</button>
          <div class="art-box">
            <div class="art-boxleft">
              <img src="@/assets/jl.png" alt="jl" class="img" />
            </div>
            <div class="art-boxright">
              <p>
                <van-text-ellipsis
                  content="计算机人工智能、应用程序开发、编程语言到变成思想"
                  rows="2"
                />
              </p>
              <ul>
                <li>
                  <div>
                    <p>已缓存4节</p>
                    <p>288M</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="缓存中"> </van-tab>
    </van-tabs>
  </main>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

const active = ref(0);
const router = useRouter();
const route = useRoute();
const onClickLeft = () => {
  router.push("/learn");
};
const onClickRight = () => {
    console.log("编辑");
};
console.log(route.query.name);
</script>
<style lang="less" scoped>
.btn {
  width: 8vh;
  border-radius: 20px;
  border: 0;
  height: 4vh;
  font-size: 14px;
  margin-left: 2.5vh;
  margin-top: 3vh;
}
.art-box {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;

  .art-boxleft {
    width: 120px;
    height: 90px;
    background-color: #666ee8;
    text-align: center;
    line-height: 75px;
    border-radius: 10px;

    .img {
      width: 90px;
      height: 65px;
      align-items: center;
      vertical-align: middle;
    }
  }

  .art-boxright {
    width: 215px;
    height: 75px;
    border-radius: 10px;
    p {
      font-size: 14px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      position: relative;
      top: 12px;
      color: #c5c5c5;
      p {
        font-size: 14px;
      }
    }
  }
}
</style>